<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全选： <input type="checkbox" name="" id="allcheck">
    <br>
    <br>
    选项1：<input type="checkbox" name="" class="check1">
    <br>
    选项2：<input type="checkbox" name="" class="check1">
    <br>
    选项3：<input type="checkbox" name="" class="check1">

    <script>
        var allcheck = document.querySelector("#allcheck");
        var check1 = document.querySelectorAll(".check1");
        var check = [...check1];

        // 点击全选，则下面的选项全部选中
        allcheck.addEventListener("click", function () {

            check.forEach(function (item) {
                // 若全选选了，则该选项就选中；反之不选中→循环
                if (allcheck.checked) {
                    item.checked = true;
                } else {
                    item.checked = false
                }

                // 即代码等于
                item.checked = allcheck.checked;
            })
        })

        // 第一遍

        // 反选方法一

        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var count = 0;
        //         check.forEach(function (item2) {
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })
        //         allcheck.checked = (count === check.length) ? true : false;
        //         // allcheck.checked = (m === check.length);
        //     })
        // })

        // 反选方法二

        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {

        //         for (var m = 0; m < check.length; m++) {
        //             if (!check[m].checked) {
        //                 break;
        //             }
        //         }
        //         // allcheck.checked = (m === check.length) ? true : false;
        //         allcheck.checked = (m === check.length);
        //     })
        // })


        // 反选方法三

        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var flag = true;
        //         check.forEach(function (item2) {
        //             if (!item2.checked) {
        //                 flag = false;
        //             }
        //         })

        //         // allcheck.checked = flag ? true : false;
        //         allcheck.checked = flag;
        //     })
        // })


        // 反选第二遍

        // 法一 count

        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var count = 0;
        //         check.forEach(function (item2) {
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })
        //         allcheck.checked = (count === check.length) ? true : false;
        //         allcheck.checked = (count === check.length);
        //     })
        // })

        // 法二
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var flag = true;
        //         check.forEach(function (item2) {
        //             if (!item2.checked) {
        //                 flag = false;
        //             }
        //         })
        //         allcheck.checked = flag;
        //     })
        // })

        // 法三
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         for (var m = 0; m < check.length; m++) {
        //             if (!check[m].checked) {
        //                 break;
        //             }
        //         }
        //         allcheck.checked = (m === check.length);
        //     })
        // })

        // 反选第三遍

        // 法一：count
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var count = 0;
        //         check.forEach(function (item2) {
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })
        //         allcheck.checked = (count === check.length);
        //     })
        // })

        // 法二
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var flag = true;
        //         check.forEach(function (item2) {
        //             if (!item2.checked) {
        //                 flag = false;
        //             }
        //         })

        //         allcheck.checked = flag;
        //     })
        // })

        // 法三
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         for (var m = 0; m < check.length; m++) {
        //             if (!check[m].checked) {
        //                 break;
        //             }
        //         }

        //         allcheck.checked = (m === check.length)
        //     })
        // })

        // 反选第四遍

        // 法一：count
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var count = 0;
        //         check.forEach(function (item2) {
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })

        //         allcheck.checked = (count === check.length)
        //     })
        // })

        // 法二 flag
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         var flag = true;
        //         check.forEach(function (item2) {
        //             if (!item2.checked) {
        //                 flag = false;
        //             }
        //         })
        //         allcheck.checked = flag;
        //     })
        // })

        // 法三
        // check.forEach(function (item) {
        //     item.addEventListener("click", function () {
        //         for (var m = 0; m < check.length; m++) {
        //             if (!check[m].checked) {
        //                 break;
        //             }
        //         }
        //         allcheck.checked = (m === check.checked)
        //     })
        // })


        // 反选第五遍

        check.forEach(function (item) {
            item.addEventListener("click", function () {
                var flag = true;
                check.forEach(function (item2) {
                    if (!item2.checked) {
                        flag = false;
                    }
                })

                allcheck.checked = flag;
            })
        })

        check.forEach(function (item) {
            item.addEventListener("click", function () {
                var count = 0;
                check.forEach(function (item2) {
                    if (item2.checked) {
                        count++;
                    }
                })
                allcheck.checked = (count === check.length)
            })
        })

        check.forEach(function (item) {
            item.addEventListener("click", function () {
                for (var m = 0; m < check.length; m++) {
                    if (!check[m].checked) {
                        break;
                    }
                }
                allcheck.checked = (m === check.length)
            })
        })
    </script>
</body>

</html>